<template>
  <div class="container page-promote-view process4">
    <a id="download-model" :href="download.url"></a>
    <div class="title-tips">首次借贷会审核以下信息请完善您的个人信息</div>
    <div class="tips">
      <div class="tips-icon"><img :src="getRequireImg('xiao-xi@2x')" alt=""></div>
      <div>信息将用于信用评估，您的资料将被严格保密</div>
    </div>
    <div class="form">
      <ul>
        <li v-for="(item, index) in labelArr" :key="`label-${index}`">
          <div :class="[`li-label ${item.name}`, {'error': item.error}]">
            <div >{{item.title}}</div>
            <span v-if="item.error">* 请您填写信息</span>
            <span v-else>* 单选</span>
          </div>
          <div class="attr-box" v-if="item.type == 'radio'">
            <div :class="['li-attr',{'active': item.value == val.id}]" v-for="(val,key) in item.options" :key="`${item.name}-${key}`" @click="change(item,val)" v-html="val.title"></div>
          </div>
        </li>
      </ul>
    </div>
    <div class="submit" @click="onlineSubmit">
      <img :src="getRequireImg('btn@2x')" alt="">
      <div>提交审核</div>
    </div>
    <!-- 弹窗 -->
    <wechat-mask v-if="WeChat_show"></wechat-mask>
    
    
    <template>
      <x-dialog
        v-model="alertDialog"
        class="alert-dialog-box"
        :dialog-style="{
          'max-width': '100%',
          width: '87%',
          'background-color': '#fff',
          overflow: 'hidden',
          'border-radius': '8px',
        }"
      >
        <div style="text-align: center; font-size: 0.875rem;padding: 30px 11px;">
          <div class="close-btn" @click="closeDialog"><img :src="getRequireImg('cha@2x')" alt=""></div>
          <div class="dialog-image"><img :src="getRequireImg('success@2x')" alt=""></div>
          <div class="dialog-title">资料提交成功！</div>
          <div class="dialog-text">请保持电话畅通，稍后将会有工作人员</div>
          <div class="dialog-text">与您联系并核实信息</div>
          <div class="toProcess" @click="goDownload">下载APP查看审核进度<span>{{alert.text}}</span></div>
        </div>
      </x-dialog>
    </template>
  </div>
</template>

<style lang="scss" scoped>
.page-promote-view.process4{
  padding: 12px;
  min-height: 100vh;
  background-color: #F5F5F5;
  .title-tips{
    font-size: 16px;
    color: #333;
    text-align: center;
    margin-bottom: 10px;
    line-height: 22px;
  }
  .tips{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background-color: #fff;
    border-radius: 4px;
    margin-bottom: 12px;
    height: 26px;
    padding-left: 12px;
    font-size: 10px;
    color: #3478F2;
    margin-left: 16px;
    margin-right: 16px;
    .tips-icon{
      width: 14px;
      margin-right: 6px;
      img{
        display: block;
        max-width: 100%;
      }
    }
  }
  
  .form{
    background-color: #fff;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, 1);
    border-radius: 8px;
    padding: 0;
    margin-bottom: 60px;
    li{
      padding: 15px 12px 0;
      border-bottom: 1px solid #E4E4E4;
      position: relative;
      &:last-child{
        border-bottom: 0;
      }
      .li-label{
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        &.error{
          div,
          span{
            color: #FC1F1F;
          }
        }
        div{
          font-size: 20px;
          font-weight: bold;
          color: #333;
        }
        span{
          font-size: 10px;
          color: #B0B0B0;
          margin-left: 6px;
        }
      }
      .attr-box{
        &::after{
          clear:both;
          content: "\3000";
          display: block;
          height: 0;
        }
        .li-attr{
          float: left;
          padding: 0;
          border: 1px solid #707070;
          border-radius: 6px;
          width: calc((100% - 30px)/3);
          margin: 10px 15px 15px 0;
          text-align: center;
          color: #333333;
          
          height: 40px;
          display: flex;
          justify-content: center;
          align-items: center;
          &:nth-child(3n){
            margin-right: 0;
          }
          &.active{
            border-color: #3478F2;
            color: #3478F2;
          }
        }
      }
    }
  }
  .submit{
    width: 350px;
    margin: auto;
    position: relative;
    img{
      display: block;
      max-width: 100%;
    }
    >div{
      color: #fff;
      font-size: 18px;
      padding-bottom: 8px;
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}

.alert-dialog-box{
  position: relative;
  .close-btn{
    position: absolute;
    right: 6px;
    top: 14px;
    z-index: 99;
    width: 22px;
    padding: 3px 4px;
    img{
      max-width: 100%;
      display: block;
    }
  }
  .dialog-image{
    width: 64px;
    height: 64px;
    border-radius: 50px;
    background-color: #3478F2;
    margin: 0 auto 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    img{
      width: 50%;
    }
  }
  .dialog-title{
    font-weight: bold;
    font-size: 22px;
    color: #333;
    margin-bottom: 8px;
  }
  .dialog-text{
    font-size: 16px;
    color: #333333;
  }
  .toProcess{
    background-color: #3478F2;
    color: #fff;
    font-weight: bold;
    text-align: center;
    line-height: 48px;
    width: 304px;
    height: 48px;
    border-radius: 8px;
    font-size: 22px;
    margin: 14px auto 0;
    span{
      font-size: 18px;
      font-weight: normal;
    }
  }
}
</style>

<script>
  /*global $ returnCitySN require ClipboardJS wx err process*/

import { getImg } from "@/service/util.helper";
import WechatMask from "@/components/WechatMask";
import iosDownload from "@/mixins/iosDownload";

export default {
  components: {
    WechatMask,
  },
  props: {},
  data() {
    return {
      data: {},
      
      download: {
        url: "",
        show: false,
      },
      alertDialog:false,
      WeChat_show: false,
      guide: this.$route.query.id || 0,
      
      labelArr:[{
        name:'room',
        title:'房产信息',
        options:[{
          id:"5",
          title:'有全款商品房',
        },{
          id:"4",
          title:'有按揭商品房',
        },{
          id:"3",
          title:'有自建房',
        },{
          id:"2",
          title:'仅外地有房',
        },{
          id:"1",
          title:'无房',
        }],
        value:'',
        type:'radio',
        error: false,
      },{
        name:'car',
        title:'车辆信息',
        options:[{
          id:"3",
          title:'有全款车',
        },{
          id:"2",
          title:'有按揭车',
        },{
          id:"1",
          title:'无车',
        }],
        value:'',
        type:'radio',
        error: false,
      },{
        name:'gjj',
        title:'公积金',
        options:[{
          id:"4",
          title:'连续6个月及<br>以上',
        },{
          id:"3",
          title:'连续3个月',
        },{
          id:"2",
          title:'3个月以下',
        },{
          id:"1",
          title:'无本地公积金',
        }],
        value:'',
        type:'radio',
        error: false,
      },{
        name:'social',
        title:'社保',
        options:[{
          id:"4",
          title:'连续6个月及<br>以上',
        },{
          id:"3",
          title:'连续3个月',
        },{
          id:"2",
          title:'3个月以下',
        },{
          id:"1",
          title:'无本地社保',
        }],
        value:'',
        type:'radio',
        error: false,
      },{
        name:'baitiao',
        title:'京东白条',
        options:[{
          id:"5",
          title:'有<br>额度3000元以下',
        },{
          id:"4",
          title:'有<br>额度0.3万-1万',
        },{
          id:"3",
          title:'有<br>额度1万-3万',
        },{
          id:"2",
          title:'有<br>3万以上',
        },{
          id:"1",
          title:'无京东白条',
        }],
        value:'',
        type:'radio',
        error: false,
      },{
        name:'huabei',
        title:'花呗',
        options:[{
          id:"5",
          title:`有<br>额度3000元以下`,
        },{
          id:"4",
          title:'有<br>额度0.3万-1万',
        },{
          id:"3",
          title:'有<br>额度1万-3万',
        },{
          id:"2",
          title:'有<br>3万以上',
        },{
          id:"1",
          title:'无花呗',
        }],
        value:'',
        type:'radio',
        error: false,
      },{
        name:'policy',
        title:'保单',
        options:[{
          id: "3",
          title:'投保人寿险且<br>2年以上',
        },{
          id: "2",
          title:'投保人寿险且<br>2年以内',
        },{
          id: "1",
          title:'无保单',
        }],
        value:'',
        type:'radio',
        error: false,
      }],
      alert: {
        text:'（3）',
        countTime: 3,
        count: 0,
      },
      postData:{
        room: '',
        car: '',
        gjj: '',
        social: '',
        policy: '',
        huabei: '',
        baitiao: '',
      }
    };
  },
  mixins:[iosDownload],
  watch:{
    
  },
  computed: {
    
  },
  methods: {
    getRequireImg(name, is64 = 0) {
      let imgObj = {
        name: name,
        is64: is64,
        download_page: null,
        flooring_page: 167,
      };
      return getImg(imgObj);
    },
     
    goDownload() {
      if(this.$route.path != '/download'){
        console.log('下载成功')
        $("#download-model")[0].click();
        this.iosDownloadPage()
      }
    },
    iosWechatBlank() {
      // Wechat leave blank compatible
      let ua = this.$router.UA();
      if (ua.ios && ua.weixin) {
        window.scroll(0, 0);
      }
    },
    checkData(){
      let ruleName = "";
      try {
        this.labelArr.forEach(v=>{
          if(!v.value){
            ruleName = v.title
            throw (v);
          }else{
            v.error = false
          }
        })
      }catch (e) {
        e.error = true
        var top = $(`.${e.name}`).offset().top - 20
        window.scrollTo({ 
          top: top, 
          behavior: "smooth" 
        });
        this.$vux.toast.text(`为了保证您的下款成功率，请完整填写您的资质信息。`,"middle");
        // this.$vux.toast.text(`请选择${e.title}`,"middle");
      }
      return ruleName
    },
    onlineSubmit() {
      this.getPostData()
      let ruleObj = this.checkData();
      if (ruleObj !== "") return;
      this.$vux.loading.show();

      this.$http
        .post(`/landing/increased`, {
          ...this.$route.query,
          ...this.postData
        })
        .then(({ data }) => {
          if (data.code === 200) {
            this.alertDialog = true;
            this.alert.count = this.alert.countTime;
            let countdown = setInterval(() => {
              this.alert.count--;
              this.alert.text = `（${this.alert.count}）`;
              if (this.alert.count === 0) {
                this.alert.text = "";
                clearInterval(countdown);
                this.goDownload()
              }
            }, 1000);
          } else {
            this.$vux.toast.text(data.msg, "middle");
          }
          this.$vux.loading.hide();
        })
        .catch((error) => {
          this.$vux.loading.hide();
          this.$vux.toast.text("服务器繁忙！", "middle");
        });
    },
    showPopup(type){
      if(type == 'xinyong'){
        this.xinyongPopup = true;
      }
      if(type == 'zhimafen'){
        this.zhimafenPopup = true;
      }
    },
    getPostData(){
      this.labelArr.forEach(v=>{
        this.postData[v.name] = v.value
      })
    },
    change(item,value){
      item.value = value.id
    },
    closeDialog(){
      this.alertDialog = false;
    },
  },
  created() {
    let ua = this.$router.UA();
    this.download.url = sessionStorage.getItem('download_url');
  },
  mounted(){
    if (this.$router.UA().weixin) {
      this.WeChat_show = true;
      return false;
    }
  }
};
</script>
